import themeImg from "@/assets/images/bonceChatGpt/theme.svg";
import styles from "./index.less";
import React, {memo, useRef, useState} from "react";
import {CheckOutlined} from '@ant-design/icons';

const ThemeConfigSet = ({themeName, themeList, changeTheme}) => {

  const [openModel, setOpenModel] = useState(false);
  const targetElementRef = useRef();
  let data = [
    {
      id:1,
      themeName: "绿色主题",
      themeColor: "#43b3bf",
      themeColorBg: "#ceebee",
    },
    {
      id:2,
      themeName: "红色主题",
      themeColor: "#DF4B4D",
      themeColorBg: "#FFF2F1",
    },
    {
      id:3,
      themeName: "橙色主题",
      themeColor: "#FF6327",
      themeColorBg: "#FFF2F1",
    },
    {
      id:4,
      themeName: "蓝色主题",
      themeColor: "#3598DB",
      themeColorBg: "#EDF2FF",
    }
  ]
  if (themeList.length > 0) {
    data = themeList
  }
  return (
    <div className={styles.theme}>
      {openModel && <div className={styles.themeBack} onClick={() => setOpenModel(false)}></div>}
      <div className={styles.themeImg} onClick={() => setOpenModel(!openModel)}>
        <img src={themeImg} alt=""/>
      </div>
      {openModel &&
        <div className={styles.themeBody} ref={targetElementRef}>
          {
            data.map((item, index) => {
              if (themeName === item.themeName) {
                return <div className={styles.themeItemOk} style={{color: item.themeColor}} key={item.id}>
                  <div>
                    <img src={themeImg} alt=""
                         style={{transform: "translateX(-100vw)", filter: `drop-shadow(${item.themeColor} 100vw 0)`}}/>
                  </div>
                  <div className={styles.themeItemName}>
                    {item.themeName}
                    <CheckOutlined className={styles.themeItemCheck}/>
                  </div>
                </div>
              } else {
                return <div className={styles.themeItem} key={item.id} onClick={() => changeTheme(item)}>
                  <div>
                    <img src={themeImg} alt=""
                         style={{transform: "translateX(-100vw)", filter: `drop-shadow(${item.themeColor} 100vw 0)`}}/>
                  </div>
                  <div className={styles.themeItemName}>
                    {item.themeName}
                    <div className={styles.themeItemCheck}></div>
                  </div>
                </div>
              }
            })
          }
        </div>}
    </div>
  )
}
export default memo(ThemeConfigSet)
